Visual lab

Visual lab · blutui-27

Feature visuals

Every feature showcase drawn in the site's blueprint language, in a few directions each. One source per visual gives its static version at three placements and its animated version.

30 features · 61 variants

Open the board
Hosting panel
DNS host
Headless CMS
content_v7.xlsx
logins.txt
Image bucket
Staging server
Form service

Weka

weka.co.nz

Published
Hosting
Domains
Pages
Collections
Forms
Cassettes
Assets
Team

One project · one login · one invoice

Hosting panelInvoice overdue
DNS hostRecords pending
Headless CMSSeat limit reached
content_v7.xlsxEdited by 4 people
logins.txtShared by email
Image bucketStorage 94% full
Staging server3 weeks behind
Form serviceWebhook failing
01 shipped

One platform

The hosting panel, the CMS, the form service, the DNS host and the staging server a studio used to juggle, as one Blutui project.

Open feature On the board →

01 · DevelopmentYour studio

02 · ReviewThe client

03 · ProductionEveryone

$ courier push

✓ 14 files synced

weka.blutui.com Preview
Weka

Spring range

Shop now

Pīwakawaka Fantailnow

Re: Spring range preview

Love it. Ship it!

weka.blutui.comweka.co.nz Live
Weka

Spring range

Shop now
Published to weka.co.nz
02 shipped

Development to production

Build on a development cassette, send the client a preview to review, and make it live when they sign off.

Open feature On the board →
Console — Projects Fig. 15
Fieldwork Agency
FA
Overview Projects Domains Settings

Projects (7)

+ Create project N
NS

Northwind Studio

northwind.blutui.com

Development
AP

Ada & Partners

ada_partners.blutui.com

Published
GH

Golden Hour

golden_hour.blutui.com

Published
B

Burgertorium

burgertorium.blutui.com

Published
FR

Frequencies Records

frequencies.blutui.com

Published
HD

Hollis Dental

hollis_dental.blutui.com

Development
FF

Field & Fern

fieldandfern.blutui.com

Published
7 projects · 5 published One login
03 shipped

Agency console

Every client project in one console: live and in development side by side, one login for the whole team.

Open feature On the board →
Kōtuku
TS
Overview Projects Domains Settings
General Branding Team Roles

Team

Manage your team members and invitations.

Invite member
Team members Pending invitations
HS
Hihi Stitchbird Invited

hihi@kotuku.studio

Admin
KP
Kākāriki Parakeet

kakariki@kotuku.studio

Admin
KK
Kōtare Kingfisher

kotare@kotuku.studio

Owner
TS
Tauhou Silvereye 2FA you

tauhou@kotuku.studio

Owner
KF
Kārearea Falcon

karearea@kotuku.studio

Admin
RW
Riroriro Warbler

riroriro@kotuku.studio

Owner
04 shipped

Team

The whole studio on one agency: invite members, give each a role and an access level, and manage seats as the team grows.

Open feature On the board →
Courier — Push Fig. 01

$ courier push

Bundling views/ and public/…

↑ views/canopy/hero.canvas

↑ public/styles/global.css

Uploading cassette…

✓ Deployed to production in 4.2s▏

cassette default 2 files · 4.2s
05 shipped

Courier sync

Push local files to the platform from the terminal and watch them land on the live project.

Open feature On the board →
PU Pūkeko
RC
Overview Branding Cassettes Domains

Cassettes

(3)(4)

Create Cassette
christmas

christmas

new-store

newstore

halloween

halloween

default Active

default
06 shipped

Cassettes

Every project keeps versions of itself: build a redesign or a seasonal campaign on its own cassette and make it live when it is ready.

Open feature On the board →
Blutui
RC
Overview Projects Domains Settings

Settings

General Branding Team Roles

Roles

Manage roles and permissions for your team.

Create role
Editor

Edit pages, collections and forms

0 users

Owner

No description

6 users

Admin

No description

2 users

Developer

No description

0 users

Freelancer

No description

0 users
07 shipped

Roles and permissions

Roles the agency defines, each with its own permissions, so every teammate and freelancer sees only what they should.

Open feature On the board →

Brand settings

Drop your brand and colour palette in to see what your agency eco-system will look like.

Primary colour

Used for buttons, links and other elements.

#242BFF#E8542B

Secondary colour

Used for secondary page elements.

#333333
Save changes
08 shipped

Whitelabeling

The studio's own logo and colours on the console, so clients log in to the agency's brand rather than Blutui's.

Open feature On the board →
Kōtuku
Search ⌘K TS
Overview Projects Domains Settings

Domains

(29)(30)

Add domain N
kakapo.nz

Added 11 Sep 2026

Status

Pending Connected
weka.co.nz

Added 4 Sep 2026

Status

Connected
pukeko.co.nz

Added 28 Aug 2026

Status

Connected
kaka.nz

Added 12 Jun 2026

Status

Connected
tieke.co.nz

Added 3 Jun 2026

Status

Connected
toroa.nz

Added 21 May 2026

Status

Connected
09 shipped

Domains

Every client domain in one place: add it, point it at a project and watch it connect, with a certificate.

Open feature On the board →
Hosting — Publish Fig. 21
HD

Hollis Dental

hollisdental.co.nzhollis_dental.blutui.com

Published Development
Building cassette · default 2.1s
Issuing certificate · hollisdental.co.nz TLS
Live at https://hollisdental.co.nz 200
Published · 4.2sPublishing… Managed hosting
10 shipped

Hosting

Every project is hosted by Blutui: publish from the console and it is live on the client's own domain, with a certificate.

Open feature On the board →
Blutui Context — Agent run Fig. 13
You

Add a team page backed by a collection.

Skill blutui-project-guidelines → rules/collections.md loaded
MCP search_blutui_documentation("collections") 3 docs
MCP create_collection("team") created
MCP create_page("/team", "layouts/team.html") 201
Write views/layouts/team.html 42 lines
courier mcp server Done · 3 calls · 1 file Running…
11 shipped

MCP and skills

Blutui Context: a Courier MCP server and agent skills that teach any AI assistant to build Blutui projects properly.

Open feature On the board →

Via MCP

HTML to
frames

The prototype

Into Figma or Paper

localhost:8080/spring
Weka

Spring range

Shop now

New this season

Ask us anything

NameEmail
MessageSend
T Weka / Spring landing TSHS Share
LayersAssets

Spring landing

Nav

Hero

Products

Enquiry

Frame

W1440 H720

Fill

FFFFFF

Auto layout

Gap 24

Spring landing

Weka

Spring range

Shop now

New this season

Ask us anything

NameEmail
MessageSend
1440 × 720
Hero
Products
Enquiry
12 exploring

Design handoff

Take an agent's prototype into Figma or Paper to refine it, then bring the design back into the project as Canvas templates and Canopy blocks through MCP.

Open feature On the board →
Canvas — team.html Fig. 11

{% for member in team %}

<article>

<h3>{{ member.name }}</h3>

<p>{{ member.role }}</p>

</article>

{% endfor %}▏

Rendered · /team

Ada Okafor Engineer
Sam Reid Producer
June Park Strategist
views/layouts/team.html 3 iterations · 12ms compiling…
13 shipped

Canvas

The templating language behind every Blutui page: loops, variables, filters and template inheritance in plain HTML.

Open feature On the board →
Canopy — Edit in place Fig. 03
Studio
Hero

Everything your studio ships withneeds

Start creating
Card
Card
Card

Hero · Settings

Heading

Everything your studio ships withneeds

Button

Start creating
Apply Save
14 shipped

Canopy editor

Clients edit the page in place. Settings live beside the canvas and the design holds whatever they change.

Open feature On the board →
Collections — Team Fig. 05
NameRoleTeam
Ada Okafor Engineer Product
Sam Reid Producer Studio
June Park Strategist Growth
Theo Lind Designer Product
4 entries · schema v2 + New entry
15 shipped

Collections

Structured content in tables the studio designs, rendered anywhere with a Canvas loop.

Open feature On the board →
KEKererū
Search⌘KRC

Pages

New page N
NameURIStatus
Careers/careersActive
Pricing/pricingActive
Services/servicesActive
Case studies/case-studiesActive
Journal/journalActive
About/aboutActive
Team/teamActive
Contact/contactActive
Our story/our-storyActive
Home/Active
16 shipped

Pages

Every page of the site in one list: add one, give it a URI and a layout, and it is live.

Open feature On the board →
KEKererū
Search⌘KRC

New post

CancelPublish post
Post published
Title
Designing a booking flow for Toroa Clinics
Paragraph

Toroa Clinics came to us with a booking form five steps long. Most people never reached the end of it.

“Nobody books an appointment for fun. Get out of their way.”

So we started again from the one question the clinic actually needs answered first: who are you, and when can you come in? Everything else — the referral, the insurer, the reason for the visit — moved to a single screen after the slot is held.

The rebuilt flow is two steps. Bookings are up by a third, and the front desk spends its mornings on people rather than on the phone.
17 shipped

Blogs

As many blogs as the site needs, each post written, scheduled and published from the admin panel.

Open feature On the board →
KEKererū
Search⌘KRC

Main Menu

CancelSave menu

Menu items

Studio

#
Active

Careers

Careers (/careers)
Active
Add sub-item

Work

Case studies (/case-studies)
Active

Journal

Journal (/journal)
Active
18 shipped

Menus

The site's navigation built in the admin panel: order the items, nest them into dropdowns and point each one at a page.

Open feature On the board →
KEKererū
Search⌘KRC

Edit page

CancelSave page
Page saved

SEO settings

Meta title
Careers at Kererū | Design and engineering jobs

/80 · This will appear in search results.

Meta description
Join Kererū, a design and build studio in Wellington. See how we work, what we make and apply for open design, engineering and project roles.

141/320 · This will appear in search results.

Hide from search results
Don’t follow links
19 shipped

SEO

Every page carries its own meta title, description and search settings, edited beside the page itself.

Open feature On the board →
KEKererū
Search⌘KRC

Assets

New folder Upload files
Search assets...

SPRING

spring-campaign.webp

48 KB

kererū

kereru-logo.svg

3.1 KB

studio-hero.webp

212 KB

team-offsite.jpg

386 KB

KEA

case-kea.webp

22 KB

pattern-grid.png

9.4 KB

K

favicon.png

1.2 KB
20 shipped

Assets

Every image and file for the site in one library, uploaded once and served from the CDN.

Open feature On the board →
CDN — Edge network Fig. 26
27 edge locations EdgeOrigin

AKL50-P1

Auckland · 3 hits · 1 miss

  • hero.webpmiss120 ms
  • app.jshit11 ms
  • case-kea.webphit16 ms
  • inter.woff2hit21 ms
Origin · ap-southeast-2 · Sydney
21 shipped

CDN

Every published site and every asset is served from Blutui's global CDN: cached at the edge, close to the visitor, so pages and images arrive in milliseconds.

Open feature On the board →
kereru.co.nz
ElementsConsoleSourcesNetwork» ⋮×

<!DOCTYPE html>

▼<html lang="en" class="js">

▶<head>…</head>

▼<body class="antialiased">

▶<header class="site-header">…</header>

▼<main>

▼<section class="hero">

▶<h1 class="hero-title">…</h1>

▶<p class="hero-lede">…</p>

▼<figure class="hero-media">

<img src="https://cdn.blutui.com/uploads/kereru/hero.jpg

"?width=1200&format=webp" alt="Kererū studio at dusk" class="hero-img" width="1200" height="800">== $0

</figure>

</section>

▶<section class="projects">…</section>

</main>

▶<footer class="site-footer">…</footer>

</body>

</html>

Rendered size1200 × 800 px

Intrinsic size4000 × 2667 px

File size3.8 MB

Current sourcehttps://cdn.blutui.com/uploads/kereru/hero.jpg

Rendered size1200 × 800 px

Intrinsic size1200 × 800 px

File size96.4 kB

Current sourcehttps://cdn.blutui.com/uploads/kereru/hero.jpg?width=1200&format=webp

htmlbodymainsection.herofigure.hero-mediaimg.hero-img
StylesComputedLayoutEvent Listeners»
Filter :hov.cls+

element.style {

}

.hero-img {global.css:214

width: 100%;

height: auto;

display: block;

}

img, video {global.css:38

max-width: 100%;

height: auto;

}
22 shipped

Image optimisation

Upload the original once and the CDN resizes and converts it on the fly: one image_url filter in the template, or two parameters on the URL, and a 4 MB photo is a 96 kB webp.

Open feature On the board →
Collections — Schema · Team Fig. 06
FieldType
Name Text
Role Text
Team Select
Start date Date Number Text
+ Add field 4 fields · schema v3 3 fields · schema v2
23 shipped

Collection builder

Design a collection schema in the console: add a field, name it, pick its type, and every entry gets it.

Open feature On the board →
Headless — Project API Fig. 17

Collections · Locations

Location

Ponsonby Clinic

Closes

6:00 pm5:00 pm

Saved

Website · Canvas

Ponsonby Clinic 6:00 pm5:00 pm

iOS app · SDK

Ponsonby Clinic 6:00 pm5:00 pm

Front desk · Kiosk

Ponsonby Clinic 6:00 pm5:00 pm
/api/collections/locations 3 fronts
24 shipped

Headless

The Project API and SDK: the same collections and forms behind the Canvas site, served as JSON to any front end.

Open feature On the board →
Forms — Submissions Fig. 08
Riley Morgan — Site rebuild for a studio 09:12
Best offer — Rank #1 on Google today!!! Blocked
Ada Okafor — Quote for a clinic website 08:47
crypto_king88 — Guaranteed returns, click here Blocked
Golden Hour — Photography site refresh Yesterday
3 clean · 2 blocked 5 submissions · scanning AI scan
25 exploring

Form spam scan

Every submission is scanned by AI before it reaches the inbox, so studios only see real enquiries.

Open feature On the board →
Forms — Builder · Contact Fig. 09

Fields

Text
Email
Phone
Select
Textarea

Name

Riley Morgan

Email

riley@northwind.studio

Phone

+44 20 7946 0000

Message

We're after a studio…
Send message
4 fields AI spam scan on
26 shipped

Form builder

Assemble a form from a palette of fields and configure each one, with the live form beside you.

Open feature On the board →
Webhooks — form.submission.created Fig. 19

Forms · Contact

Name

Riley Morgan

Email

riley@northwind.studio
Send message

Slack · #leads

B

New enquiry · Riley Morgan

riley@northwind.studio

CRM · Leads

Riley Morgan New
form.submission.created 2 delivered · 200Listening…
27 shipped

Webhooks

Project events pushed to any endpoint the moment they happen: a form submission lands in Slack, Zapier or a CRM.

Open feature On the board →
KEKererū
Search⌘KRC
Home

General

PagesAssetsFormsMenus

Blogs

Case StudiesJournalArticles

Collections

NavigationTeamLocationsFAQTestimonialsOpening Hours

Settings

Website detailsMeta & SEOSitemapUsersVerified emailsFormsRedirectsRoute patternsCode injectionWebhooks

Redirects

New redirect
FromTo
/about-us/about
/journal/articles
/services/branding/work/branding
/team/hihi/people/hihi
/competition/

New redirect

From
/terms
To
//fair-use
CancelCreate redirectCreate redirect
Redirect created/terms → /fair-use
28 shipped

Redirects

Retire a path without losing it: every old URL keeps working, sending visitors and search engines to the page that replaced it.

Open feature On the board →
KEKererū
Search⌘KRC
Home

General

PagesAssetsFormsMenus

Blogs

Case StudiesJournalArticles

Collections

NavigationTeamLocationsFAQTestimonialsOpening Hours

Settings

Website detailsMeta & SEOSitemapUsersVerified emailsFormsRedirectsRoute patternsCode injectionWebhooks

Route patterns

New pattern
PatternTemplate
/journal/:sluglayouts/article.html
/locations/:sluglayouts/location.html
/work/:sluglayouts/case-study.html
/ambassadors/:sluglayouts/ambassador.html
/people/:sluglayouts/person.html

New route pattern

Pattern

Hint: Use pattern templates below to create a new pattern.

stringslugdatetimenumber
stringslug

Preview: yoursite.url/stringyoursite.url/string/{slug}

TemplateChoose a templateUsing Cassette:default
CreateCancel
29 shipped

Route patterns

One layout serves a whole collection: describe the URL once and every entry gets its own page, no pages to create by hand.

Open feature On the board →
Footer — Logo · Spotlight Fig. 23
    0                                                                                                                                                          11000                                                                                                                                              1001     1011000                                                                                                                                           11101010  111010001                                    110                                               101011                                              01001011  000100110                                  1100011                                            10101011                                            1010001110 101011010                                  01011000                                           10011011                                             00011101  010111010                                 001110101                                           01101001                                              011000   100110110                                 001110101                                           01110100                                                       011101010                                 110100101                                           10001001                                                       101100011                                 101010111                                           01000111                                                       010101101                                 001011000                                           10011011                                                       000111010   10111010001110                101011010       010110                 001001       10110001110101011101000                 111010        101101   0010110001001101100011101010              111010001      11010101               10100101      100010011011000111010101               11010001      11010101  101001011000100110110001110101            011101000      11101010               11010010      110001001101100011101010               11101000      11101010  11010010110001001101100011101010          111010001      11010101               10100101      100010011011000111010101               11010001      11010101  101001011000100110110001110101011         101000111      01010110               10010110      001001101100011101010111               01000111      01010110  10010110001001         10110001110        101011101      00011101               01011010      01011000        10011011               00011101      01011101  000111010101              101001011       000100110      11000111               01010111      01000111        01010110               10010110      00100110  11000111010                101110100      011101010      11010010               11000100      11011000        11101010               11101000      11101010  1101001011                  00010011      011000111      01010111               01000111      01010110        10010110               00100110      11000111  010101110                    10001110     101011010      01011000               10011011      00011101        01011101               00011101      01011010  010110001                    00110110     001110101      01110100               01110101      01101001        01100010               01101100      01110101  011101000                    11101010     110100101      10001001               10110001      11010101        11010001               11010101      10100101   1000100                     11011000     111010101      11010001               11010101      10100101        10001001               10110001      11010101   1101000                     11101010     110100101      10001001               10110001      11010101        11010001               11010101      10100101     100                       01001101     100011101      01011101               00011101      01011010        01011000               10011011      00011101                              01011101      000111010      10110100               10110001      00110110        00111010               10111010      00111010                             101101001      011000100      110110001             11010101       11010001        110101011             010010110      00100110                            110001110       101011101       000111010           101101001       01100010         011011000           111010101       11010001                         11010101101        001011000       1001101100        0111010101        11010001         1101010110        1001011000        10011011               00011101010111010001         110101011        01001011000100110110001110         10101110          100011101010110100101100010        01101100              01110101011101000111          010101101         001011000100110110001110          10101110           1000111010101101001011000         10011011             00011101010111010001           110101011           010010110001001101100           01110101             011101000111010101101           00101100              01001101100011101              0101110             100011101010110100             10110001              001101100011101010             11101000               1110101011010                  01011                 0001001101100                011101                  0101110100011                101010                     11                          0                         1                                                    0                              
0110 0010 0110 1100 0111 0101 0111 0100 0111 0101 0110 1001
30 exploring

Footer logo

The wordmark as ASCII art for the site footer: "blutui" in binary, streamed through the letters, with a pointer interaction to choose.

Open feature On the board →

Static

A visual with nothing playing is its static version. Each feature page shows it at the three placements blutui-27 uses: bento card, feature row and hero figure.

Animated

The same source with data-playing set. The Motion switch above is the policy: Auto is how the site behaves, All plays everything, Off freezes the lab.

Adding one

Drop a file in views/components/visuals/<feature>/ and add it to the registry at the top of templates/default.html. The rules are in CLAUDE.md.